<template>
    <div class="ma-content-block p-1">
        <a-space>
            <a-button type="primary" @click="add"><template #icon><icon-plus /></template>新增</a-button>
        </a-space>
        <a-space class="ml-5">
            <a-upload :show-file-list="false" :custom-request="customRequest">

                <template #upload-button>
                    <a-button type="outline">
                        <template #icon><icon-share-external /></template>导入</a-button>
                </template>
            </a-upload>
        </a-space>
    </div>
    <a-table :columns="columns" :data="tableData" :pagination="pagination" @page-change="changePage">

        <template #optional="{ record }">
            <a-space>
                <a-button type="text" @click="edit(record)"><template #icon><icon-edit /></template>编辑</a-button>
            </a-space>
            <a-popconfirm @ok="delete_item(record.id)" content="确定要删除该数据吗?" position="bottom">
                <a-button type="text" status="danger">

                    <template #icon><icon-delete /></template>删除</a-button>
            </a-popconfirm>
        </template>
    </a-table>
    <a-modal :width="800" :visible="show" unmount-on-close @ok="save" @cancel="show = false">

        <template #title>
            <span>{{ title }}</span>
        </template>
        <TableDeta ref="editRef" :id="props_id" :purchase_id="props.id" :source="props_source"
            @refreshList="refreshList" />
    </a-modal>
</template>

<script setup>
import { reactive, ref, shallowRef } from 'vue'
import TableDeta from "@/views/purchase/components/TableDeta.vue";
import { Message } from "@arco-design/web-vue";
import request from '@/api/purchase'

const props = defineProps({
    id: [String, Number]
});
const columns = [
    {
        title: 'ID',
        dataIndex: 'id',
        ellipsis: true,
        tooltip: true,
        fixed: 'left',
        align: "center"
    },
    {
        title: '用户邮箱',
        dataIndex: 'user.phone',
        align: "center"
    },
    {
        title: '来源',
        dataIndex: 'source_name',
        align: "center"
    },
    {
        title: '数量',
        dataIndex: "number",
        align: "center"
    },
    {
        title: '操作',
        slotName: 'optional',
        align: "center"
    }
];
const tableData = ref([]);
const pagination = reactive({
    total: 1,
    current: 1,
    pageSize: 10,
    showTotal: true,
    showJumper: true
});

const props_source = ref({});
const getList = async () => {
    const { data: { list: { data, total }, source } } = await request.table_list({
        page: pagination.current,
        pageSize: pagination.pageSize,
        id: props.id
    });
    tableData.value = data;
    pagination.total = total;
    props_source.value = source;
};
getList();
const changePage = (current) => {
    pagination.current = current;
    getList();
};

const customRequest = async (options) => {
    const file = options.fileItem.file;
    const dataForm = new FormData();
    dataForm.append("purchase_id", props.id);
    dataForm.append("file", file);
    await request.upload(dataForm);

    Message.success("操作成功");
    pagination.current = 1;
    getList();
    // form.content = data?.str;
};

const props_id = ref('');
// 新增
const title = ref("");
const show = ref(false);
const add = () => {
    title.value = "新增";
    props_id.value = "";
    show.value = true;
};
//编辑
const edit = async (record) => {
    title.value = "编辑";
    props_id.value = record.id;
    show.value = true;
};

const editRef = shallowRef();
const save = () => editRef.value.submit();
const refreshList = () => {
    pagination.current = 1;
    show.value = false;
    getList();
};

const delete_item = async (id) => {
    await request.table_delete({
        ids: [id]
    });
    getList();
};
</script>